<template>
  <div id="app">
    <!-- 以标签的形式引用Header子组件 -->
    <Header />
    <router-view />
    <Footer v-show="$route.meta.show" />
    <!-- 方案一：我们可以使用$route获取path的路径来判断Footer组件显示或者隐藏 -->
    <!-- <Footer
      v-show="$route.path == '/home' || $route.path == '/search'"
    ></Footer> -->
  </div>
</template>

<script>
// 在app.vue在跟组件里面导入  Header的子组件
import Header from "./components/Header";

import Footer from "./components/Footer";
export default {
  name: "App",
  components: {
    // 往Vue实例对象里面注册Header子组件
    Header,
    Footer,
  },
};
</script>

<style>
/* 要去掉app.vue 默认的样式 */
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
</style>
